<!DOCTYPE html>
<html lang="zn-CH">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./lib/vue.min.js"></script>
    <script src="./lib/axios.min.js"></script>
    <link rel="stylesheet" href="./css/index.css" />
    <title>表单生成器</title>
  </head>

  <body>
    <div id="app">
      <form>
        <div class="left-box">
          <!-- 组件容器 -->
          <div v-for="(item, i) in formData" :key="`${i}item`" class="item">
            <!-- 此处 label 为表单的标题 -->
            <div class="label">{{item.title}}</div>
            <!-- TODO: 根据 formData 中的 type 不同完成组件渲染  -->
            <template v-if="item.options">
              <component
                v-for="(c, ci) in item.options"
                v-model="item.value"
                :is="'my-'+item.type"
                :label="c.label"
                >{{c.name}}</component
              >
            </template>
            <template v-else>
              <component v-model="item.value" :is="'my-'+item.type" />
            </template>
          </div>
        </div>
        <!-- 表单设置 -->
        <div class="right-box">
          <div>
            <button class="btn" @click="fetchData">初始化</button>
            <button class="btn" id="result" @click="confirm">获得数据</button>
            <button class="btn" id="render" @click="setData">渲染数据</button
            ><br /><br />
          </div>
          <textarea v-model="testData" cols="45" rows="12"></textarea>
          <div class="error" v-if="hasError">JSON 格式输入有误，请仔细检查</div>
        </div>
      </form>
    </div>
    <script src="./components/input.js"></script>
    <script src="./components/radio.js"></script>
    <script src="./components/rate.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          formData: [],
          testData: "",
          hasError: false,
        },
        created() {
          this.fetchData();
        },
        methods: {
          async fetchData() {
            // 请求 JSON 数据
            const { data } = await axios.get("./data.json");
            this.formData = data.result;
            this.confirm();
          },
          // 设置数据
          setData(e) {
            e && e.preventDefault();
            try {
              const newData = JSON.parse(this.testData);
              this.formData = this.formData.map((x) => {
                x.value = newData[x.field];
                return x;
              });
              this.hasError = false;
            } catch (err) {
              if (err) {
                this.hasError = true;
              }
            }
          },
          // 获得数据
          confirm(e) {
            e && e.preventDefault();
            const params = {};
            this.formData.forEach(({ field, value }) => {
              params[field] = value;
            });
            this.testData = JSON.stringify(params, null, 2);
          },
        },
      });
    </script>
  </body>
</html>
